<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style>
			.box{
				display: inline-block;
				padding: 10px 20px;
				border: 1px solid #8a8a8a;
				cursor:pointer;
			}
			.active{
				background-color: #8a8a8a;
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div @click="handleClick">按钮</div>
		</div>
	</body>
	<script>
		const vm = new Vue({
			el:'#root',
			data(){
				return { 
					clicked:false
				}
			},
			methods:{
				handleClick(){
					this.clicked = !this.clicked
				}
			},
			computed:{
				className(){
					return this.clicked ? "box active" : "box"
				}
			},
			watch:{
				// clicked:{
				// 	// 当配置项中只有handler时，就可以使用简写模式。
				// 	// immediate:true,//初始化时，让handler调用一下
				// 	// deep:true,
				// 	//当clicked的值被修改的时候，调用一次
				// 	handler(newValue,oldValue){
						
				// 	}
				// }
				clicked(newValue,oldValue){
					
				}
			}
		})
		
		//vm.$watch的简写模式，注意不能使用箭头函数
		vm.$watch('clicked',function(newValue,oldValue){
			
		})
	</script>
</html>